<template>
  <div>
    <label :for="custom.id">{{custom.input_hint}}</label>
    <!--  通过emit发射一个Input事件到外层父容器  -->
    <input :id="custom.id" type="text" :placeholder="custom.place_holder"
           @input="$emit('input', $event.target.value)"/>
  </div>
</template>

<script>
  export default {
    name: 'custom-input',
    props: ['custom'],
  }
</script>

<style scoped>
  label {
    color: palevioletred;
    size: 14px;
  }

  input {
    background-color: aliceblue;
  }
</style>
